<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>从自如搬家看代码整洁之道 | 前端一锅煮</title>
    <meta name="description" content="从自如搬家看代码整洁之道">
    <link rel="icon" href="/blog/logo.jpg">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
    <meta name="keywords" content="前端一锅煮,从自如搬家看代码整洁之道">
    <link rel="preload" href="/blog/assets/css/0.styles.3a36f1f3.css" as="style"><link rel="preload" href="/blog/assets/js/app.2d50d9dc.js" as="script"><link rel="preload" href="/blog/assets/js/17.0b8bcd15.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cf06b472.js"><link rel="prefetch" href="/blog/assets/js/11.57a175c6.js"><link rel="prefetch" href="/blog/assets/js/12.b32f2db2.js"><link rel="prefetch" href="/blog/assets/js/13.818a88b3.js"><link rel="prefetch" href="/blog/assets/js/14.1c54dd87.js"><link rel="prefetch" href="/blog/assets/js/15.40ea867f.js"><link rel="prefetch" href="/blog/assets/js/16.379721e3.js"><link rel="prefetch" href="/blog/assets/js/18.41bb3889.js"><link rel="prefetch" href="/blog/assets/js/19.6362af40.js"><link rel="prefetch" href="/blog/assets/js/2.55dfcea5.js"><link rel="prefetch" href="/blog/assets/js/20.4ce40a8a.js"><link rel="prefetch" href="/blog/assets/js/21.ba4dcc65.js"><link rel="prefetch" href="/blog/assets/js/22.d2fad5dd.js"><link rel="prefetch" href="/blog/assets/js/23.2a976f6d.js"><link rel="prefetch" href="/blog/assets/js/24.a6407b77.js"><link rel="prefetch" href="/blog/assets/js/25.28818591.js"><link rel="prefetch" href="/blog/assets/js/26.a4d6759f.js"><link rel="prefetch" href="/blog/assets/js/27.fe72fdf4.js"><link rel="prefetch" href="/blog/assets/js/28.ca4a85a9.js"><link rel="prefetch" href="/blog/assets/js/29.4c6c0c28.js"><link rel="prefetch" href="/blog/assets/js/3.e235257b.js"><link rel="prefetch" href="/blog/assets/js/30.6aa9a972.js"><link rel="prefetch" href="/blog/assets/js/31.b7bccc14.js"><link rel="prefetch" href="/blog/assets/js/32.3544b6a6.js"><link rel="prefetch" href="/blog/assets/js/33.3bb697fd.js"><link rel="prefetch" href="/blog/assets/js/34.ac7cecf3.js"><link rel="prefetch" href="/blog/assets/js/35.b26fe96f.js"><link rel="prefetch" href="/blog/assets/js/36.91eb88f8.js"><link rel="prefetch" href="/blog/assets/js/37.baa3c248.js"><link rel="prefetch" href="/blog/assets/js/4.04108111.js"><link rel="prefetch" href="/blog/assets/js/5.2e3bc3e6.js"><link rel="prefetch" href="/blog/assets/js/6.88208dc4.js"><link rel="prefetch" href="/blog/assets/js/7.7913f494.js"><link rel="prefetch" href="/blog/assets/js/8.64ff3aa5.js"><link rel="prefetch" href="/blog/assets/js/9.43d70a25.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3a36f1f3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">前端一锅煮</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>从自如搬家看代码整洁之道</span> <!----></p> <ul class="sidebar-group-items"></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="从自如搬家看代码整洁之道"><a href="#从自如搬家看代码整洁之道" class="header-anchor">#</a> 从自如搬家看代码整洁之道</h1> <p>上个月搬家，一个刚清理好的房子，空旷干净。因为是第一个入驻，厨房、客厅、卫生间都是空的，让我得以自由的设计和摆放。这种感觉是非常好的。完全没有历史遗留问题，就像新开的项目，可以用最新的理念，最好的规范，配以最优的配置和架构，发挥出最大的效率。</p> <p>去年搬家，是隔壁小区的房子，因为已经住了人，也换过几波，物品堆满了整个区域，要的不要的，什么都有，没有标签，也分不清是谁的，不敢轻易扔掉。不过还好，在后面做了一次大扫除后完美的解决了问题。方法就是各自把物品先全部收回，然后把剩下无人认领的全部清理掉。这是一次不复杂的优化重构。</p> <p>住进去以后，一开始还担心人多会很乱不干净，但真实体验是很好的。整体非常干净统一，因为每半个月会有一次保洁，此时会对公共区域进行一次非常彻底的清理，清理完毕后又是全新的环境。定期重构清零，这个理念是非常先进的。</p> <p>180 度大掉头，进入正式话题。缘由在于最近接手的一个项目，直接把我惊到了。真是第一次发现代码可样写，可以这么糟糕，让我感悟深刻，特发此文以作纪念。</p> <p>什么是好的项目？能正常运行的就算吗？不是的，这仅仅是项目完成基本指标的第一个！</p> <p>衡量一个项目完成情况有三大指标，第一：可以正常跑起来；第二：可持续维护下去，包括新增功能，原功能调整改造，新人可接手；第三：具备可升级可优化特性，比如相关插件、组件以及主框架版本升级，数据库升级、配置升级，规范格式的优化、代码的优化。然而这三点恰恰是很多项目不完全具备的。</p> <p>开一个新项目，一开始写的都挺嗨，这是没问题的。问题在于是否有持续的优化和清理，是否有像自如半月清零的措施，每半个月把此前积累的问题全部清零，重新优化调整现有结构以适应持续增长的代码量。一个函数刚开始用可以直接写。两天后发现有三个页面在用，可以抽离成单独的方法，需要者自行引用。五天后发现到处都在用，此时需要做成全局公共方法，直接调用，把各自引用的步骤也去了。事物是动态发展，不断演进的，现在对的方法以及合理的理念，一年后也许就过时，被淘汰了，所以是必须不断优化，不断调整的。但是实际情况往往并非如此。</p> <p>有的项目一开始选型就错了，但是未纠正错误反而硬是继续往里面堆功能。有的因为时间紧任务重，基本完成任务就不管了，完全没有回过头再去优化前期代码。这些表面上看这是可以对付过去的，但是最终真正受到巨大损失的是公司，挖了一堆坑自己跑了，后续接手代价非常大。前人挖坑，迟早要后来人填。因为这些项目是不具备可持续维护性的，原始开发者一离开，新接手者大部分只能选择推到重来。没有文档，没有注释，挖了一堆坑除了原始开发者无人知，具体可以乱成什么样在这里就不细说了。也可能第一个开发者写的不是太糟糕，第二个接手的乱写一通，然后第三个，第四个，到第五个已经就接不下去了。病入膏肓，毒已入髓，回天乏力。推到重来。但是一个项目推到重来的代价是非常大的，就相当于此前做的全部清零，重新开始再来一遍。规范统一真是开发者最核心的要素。</p> <p>到现在其实一直非常不赞同一个趋势。前端火起来以后，有安卓、IOS以及各类后端开发转前端的。这本来是没问题的，怕就怕觉得前端就是写写逻辑搞搞页面完事，带着这种思想过来是非常危险的。这里介绍个纯前端的概念，指经过一个完整的前端训练体系和项目实战周期的前端开发者。从前端基础生态（html、html5、css、css3、js、jq）、Vue生态、React生态、小程序生态、Node生态，一步一步往前走，扎扎实实做起来，而不是一转就直接干到 Vue、React、小程序去了，前端基础是非常重要而且是核心的内容，但这恰恰是其他岗位转前端者需要重点补课的。前端的特性是轻量化、简洁、独立性强、可轻易操作、体验好以及速度快的。但是很多转前端的开发思想还是原来那一套，过渡封装，过渡设计，过渡抽象，这些一定是因为到了需要的时候才去干的事情，而不是一开始就把逻辑写的很重。记忆最深刻的一件事就是浏览器页面自动更新功能。就为了省这一秒，少按一下刷新按钮，有专门的公司开发项目提供自动刷新功能，付费版本。直到后来三大框架和 Webpack 崛起，自带热更新热替换功能，才慢慢没人用了。当时很多编译器插件也有专门做支持的，只是没有收费软件好用。为了节省 1 秒钟，可以去造各种插件，现在怎么可以接受把简单的事情复杂化而人为的去制造障碍呢？</p> <p>约定大于配置，持续优化是王道。再好的项目，没人持续更新维护就会被社区抛弃，迅速被其他项目所替代。大家都知道熵增定律，一切都在由有序走向无序，而要纠正这种趋势，就需要不断做功。房间乱了需要每周去清理重整一次，代码越来越多了也需要定期去清理规整优化一遍，万物相通。</p> <p>代码整洁之道整洁之道就是一条持久优化之路。</p></div> <div class="page-edit"><div class="edit-link"><a href="https://gitee.com/cjm0/blog/edit/master/docs/page/list/code_review.md" target="_blank" rel="noopener noreferrer">在 Gitee 上编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div> <!----></div></div>
    <script src="/blog/assets/js/app.2d50d9dc.js" defer></script><script src="/blog/assets/js/17.0b8bcd15.js" defer></script>
  </body>
</html>
